<template>
  <div class="my-container">

    <van-cell>
      <template>
        <div class="avatar"
             :style="isLogin?'background-image: url('+user.avatar+')':'background-color:#eee'"></div>
        <span v-if="isLogin"
              class="uname">{{user.uname}}</span>
        <van-button v-else
                    plain
                    hairline
                    type="info"
                    size="small"
                    round
                    to="/login">登录</van-button>
      </template>
    </van-cell>

    <van-cell-group>
      <van-cell title="精品推荐"
                icon="gold-coin"
                clickable />
    </van-cell-group>

    <van-cell-group v-if="user.rank!=1">
      <van-cell title="我的管理"
                icon="new-arrival "
                clickable
                @click="toManage" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="我的订单"
                icon="balance-list"
                clickable />
      <van-cell title="会员中心"
                icon="vip-card"
                clickable />
      <van-cell title="我的优惠券"
                icon="coupon"
                clickable />
      <van-cell title="我的礼物码"
                icon="gift-card"
                clickable />
      <van-cell title="我的红包"
                icon="hot"
                clickable />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="在线客服"
                icon="audio"
                clickable />
      <van-cell title="设置"
                icon="bars"
                clickable />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="退出登录"
                icon="setting"
                clickable
                @click="loginOut" />
    </van-cell-group>

  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  data() {
    return {
      isLogin: false,
      user: {}
    }
  },
  mounted() {
    this.initUser()
  },
  methods: {
    // 初始化用户数据
    initUser() {
      if (localStorage.getItem('user')) {
        this.isLogin = true
        this.user = JSON.parse(localStorage.getItem('user'))
      }
    },
    // 我的管理跳转
    toManage() {
      let { _id, rank } = this.user
      if (rank == 0) {
        this.$router.push({ path: 'my/admin', query: { _id } })
      } else if (rank == 2) {
        this.$router.push({ path: 'my/business', query: { _id } })
      }
    },
    loginOut() {
      Dialog.confirm({
        message: '是否退出登录',
      }).then(() => {
        localStorage.removeItem('user')
        localStorage.removeItem('cartList')
        this.isLogin = false
      }).catch(() => { })
    }
  }
}
</script>

<style lang="scss">
.my-container {
  background-color: #eee;
  padding: 10px 0;
  .avatar {
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 55px;
    background-color: #eee;
    margin-right: 0.4rem;
    background-size: 100% 100%;
  }
  .uname {
    font-weight: bolder;
    font-size: 0.5rem;
  }
  .van-cell-group {
    margin: 10px 0;
  }
}
</style>